import {Button, DatePicker, Input, NavBar} from 'antd-mobile'
import Icon from '../../Components/Icon/index'
import './index.scss'
import classNames from 'classnames'
import {useNavigate} from 'react-router-dom'
import {addList} from '@/store/modules/billStore'
import {useCallback, useState} from 'react'
import {billListData} from "@/contant/bill";
import {useDispatch} from 'react-redux'
import dayjs from 'dayjs'

const News = () => {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    // 1. 准备一个控制收入支出的状态
    const [BillType, setType] = useState('pay')
    // 收集金额
    const [money, setMoney] = useState(0)
    const MoneyValue = (value) => {
        setMoney(value)
    }
    // 存储选择的时间
    const [SelectedDate, setDate] = useState(dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))
    // 收集账单类型
    const [billKey, setBillKey] = useState('')
    // 保存账单
    const data = {
        type: BillType,
        money: BillType === 'pay' ? -money : +money,
        date: SelectedDate,
        remark: billKey,
    }

    const onSave = () => {

        if (!data.type) {
            alert('请选择账单类型')
            return
        }
        if (!data.money) {
            alert('请输入金额')
            return
        }
        if (!data.remark) {
            alert('请输入账单分类')
            return
        }

        alert('保存成功')
        dispatch(addList(data))

        setMoney(0)
        setBillKey('')
    }

    // 控制时间打开关闭
    const [visible, setVisible] = useState(false)
    const labelRenderer = useCallback((type: string, data: number) => {
        switch (type) {
            case 'year':
                return data + '年'
            case 'month':
                return data + '月'
            case 'day':
                return data + '日'
            default:
                return data
        }
    }, [])

    // 确认选择时间
    const onTrue = (value) => {
        setVisible(false)
        setDate(dayjs(value).format('YYYY-MM-DD HH:mm:ss'))
    }
    return (<div className="keepAccounts">
        <NavBar className="nav" onBack={() => navigate(-1)}>
            记一笔
        </NavBar>

        <div className="header">
            <div className="kaType">
                <Button
                    shape="rounded"
                    className={classNames(BillType === 'pay' ? "selected" : '')}
                    onClick={() => setType('pay')}
                >
                    支出
                </Button>
                <Button
                    shape="rounded"
                    className={classNames(BillType === 'income' ? "selected" : '')}
                    onClick={() => setType('income')}
                >
                    收入
                </Button>
            </div>

            <div className="kaFormWrapper">
                <div className="kaForm">
                    <div className="date" onClick={() => setVisible(true)}>
                        <Icon type="calendar" className="icon"/>
                        <span
                            className="text">{dayjs(new Date()).format('YYYY-MM-DD') ===
                        dayjs(SelectedDate).format('YYYY-MM-DD') ? '今天' : dayjs(SelectedDate).format('YYYY-MM-DD')}</span>
                        {/* 时间选择器 */}
                        <DatePicker
                            className="kaDate"
                            title="记账日期"
                            max={new Date()}
                            visible={visible}
                            onClose={() => setVisible(false)}
                            onCancel={() => setVisible(false)}
                            onConfirm={onTrue}
                            renderLabel={labelRenderer}
                        />
                    </div>
                    <div className="kaInput">
                        <Input
                            className="input"
                            placeholder="0.00"
                            type="number"
                            value={money}
                            onChange={MoneyValue}
                        />
                        <span className="iconYuan">¥</span>
                    </div>
                </div>
            </div>
        </div>

        <div className="kaTypeList">
            {/* 数据区域 */}
            {billListData[BillType].map(item => {
                return (
                    <div className="kaType" key={item.type}>
                        <div className="title">{item.name}</div>
                        <div className="list">
                            {item.list.map(item => {
                                return (
                                    // 添加类名selected即表示选中
                                    <div
                                        className={classNames(
                                            'item', billKey === item.type ? 'selected' : ''
                                        )}
                                        key={item.type}
                                        onClick={() => setBillKey(item.type)}>
                                        <div className="icon">
                                            <Icon type={item.type}/>
                                        </div>
                                        <div className="text">{item.name}</div>
                                    </div>
                                )
                            })}
                        </div>
                    </div>
                )
            })}
        </div>
        <div className="btns">
            <Button className="btn save" onClick={onSave}>
                保 存
            </Button>
        </div>
    </div>)
}

export default News